<mat-progress-bar  mode="indeterminate" *ngIf="isFeedSaving" color="accent"></mat-progress-bar>
<mat-horizontal-stepper #stepper *ngIf="engine != null" [linear]="true" class="mat-stepper-no-header" (selectionChange)="onStepChange($event)">
  <mat-step>
    <ng-template matStepLabel>Build Query</ng-template>
    <build-query-ng2 [engine]="engine" [model]="dataModel.model" [showDatasources]="showDatasources" [heightOffset]="this.heightOffset" (back)="onCancel()" (next)="stepper.next()" [queryExecutionFailure]="queryExecutionFailure"
                     (sqlChange)="sqlChanged($event)"></build-query-ng2>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Transform Data</ng-template>
    <thinkbig-visual-query-transform [warnWhenLeaving]="false" [active]="stepper.selectedIndex == 1" [engine]="engine" [model]="dataModel.model" [heightOffset]="this.heightOffset"
                                     [nextButton]="showSaveStep ? 'Next' : 'Save'" [feedModel]="feed" [disableNextButton]="isFeedSaving" (back)="stepper.previous()" (next)="showSaveStep ? stepper.next() : doSave()"
                                     *ngIf="visitedTransform"
    (queryFailure)="queryFailed()">
    </thinkbig-visual-query-transform>
  </mat-step>
  <mat-step *ngIf="showSaveStep">
    <ng-template matStepLabel>Save</ng-template>
    <thinkbig-visual-query-store [engine]="engine" [model]="dataModel.model" (back)="stepper.previous()" *ngIf="stepper.selectedIndex == 2"></thinkbig-visual-query-store>
  </mat-step>
</mat-horizontal-stepper>
